<template>
  <div class="dialog-content">
    <p class="instruction">点击红色文字，选择近义词即可替换</p>
    <div class="custom-textarea">
      <span v-for="(item, index) in textItems" :key="index">
        <span v-if="item.type === 'normal'">{{ item.text }}</span>
        <span v-else class="clickable-word" @click="handleWordClick(item)">{{ item.text }}</span>
      </span>
    </div>
    <div class="word-count">
      {{ textContent.length }} / 8000
    </div>
  </div>
  <div style="text-align: center; margin-top: 20px;">
    <span class="dialog-footer">
      <el-button @click="restoreDefault">恢复默认</el-button>
      <el-button type="primary" @click="confirmChanges">
        确认使用
      </el-button>
    </span>
  </div>

  <el-dialog v-model="editDialogVisible" title="选择近义词" width="30%">
    <div class="word-options">
      <el-button 
        v-for="option in wordOptions" 
        :key="option" 
        :class="{ 'selected': editingWord === option }"
        @click="selectWord(option)"
      >
        {{ option }}
      </el-button>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmEdit">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, computed, defineProps, defineEmits } from 'vue'

const props = defineProps({
  msg: {
    type: String,
    default: ''
  }
})

const dialogVisible = ref(true)
const textContent = ref(props.msg)
const editDialogVisible = ref(false)
const editingWord = ref('')
const editingIndex = ref(-1)
const initialContent = ref(props.msg) // 保存初始内容
const emit = defineEmits(['textUpdated'])

const highlightWords = ['同父异母', '苹果']
// 自定义选项
const wordOptions = ref(['同父异母', '同父同母', '同母异父', '异父异母'])

const textItems = computed(() => {
  const items = []
  let lastIndex = 0
  const regex = new RegExp(`(${highlightWords.join('|')})`, 'g')
  
  textContent.value.replace(regex, (match, word, index) => {
    if (index > lastIndex) {
      items.push({ type: 'normal', text: textContent.value.slice(lastIndex, index) })
    }
    items.push({ type: 'highlight', text: word })
    lastIndex = index + word.length
  })

  if (lastIndex < textContent.value.length) {
    items.push({ type: 'normal', text: textContent.value.slice(lastIndex) })
  }

  return items
})

const handleWordClick = (item) => {
  editingWord.value = item.text
  editingIndex.value = textItems.value.indexOf(item)
  editDialogVisible.value = true
}
const selectWord = (word) => {
  editingWord.value = word
}
const confirmEdit = () => {
  if (editingIndex.value !== -1) {
    const newItems = [...textItems.value]
    newItems[editingIndex.value] = { type: 'highlight', text: editingWord.value }
    textContent.value = newItems.map(item => item.text).join('')
  }
  editDialogVisible.value = false
}

const confirmChanges = () => {
  console.log('确认使用:', textContent.value)
  emit('textUpdated', textContent.value)
  dialogVisible.value = false
}
const restoreDefault = () => {
  textContent.value = initialContent.value // 恢复到初始内容
  console.log('恢复默认:', textContent.value)

}



</script>

<style scoped>
.dialog-content {
  position: relative;
}

.instruction {
  margin-bottom: 10px;
  color: #909399;
}

.word-count {
  position: absolute;
  bottom: 5px;
  right: 15px;
  font-size: 12px;
  color: #909399;
}

.custom-textarea {
  color: black;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 10px;
  min-height: 300px;
  max-height: 400px;
  overflow-y: auto;
  line-height: 1.5;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.clickable-word {
  color: #c45656;
  cursor: pointer;
}
.word-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.word-options .el-button {
  margin: 5px;
}

.word-options .el-button.selected {
  background-color: #409EFF;
  color: white;
}
</style> 